<template>
    <div class="sale_view">
      <el-card shadow="hover" :body-style="{ padding: '0 0 20px 0'}">
        <div slot="header" class="sale_view_card_header">
          <el-menu :default-active="activeIndex" mode="horizontal" @select="MenuSelectHandler" class="sale_view_menu">
            <el-menu-item index="1">销售额</el-menu-item>
            <el-menu-item index="2">访问量</el-menu-item>
          </el-menu>
          <div class="sale_view_menu_right">
            <el-radio-group v-model="radioSelect" size="small">
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="本周"></el-radio-button>
              <el-radio-button label="本月"></el-radio-button>
              <el-radio-button label="今年"></el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="date"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              size="small"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="rank-wrapper">
         <vue-echarts :options="saleViewOptions" />
          <div class="rankList">
            <h3>排行榜</h3>
            <div class="list">
              <div class="list-item" v-for="item in rankData" :key="item.id">
                <span :class="['item-number', +item.no <=3 ? 'top-no': '']">{{item.no}}</span>
                <span class="item-title">{{item.name}}</span>
                <span class="item-price">{{item.money}}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
</template>

<script>
  import CommonDataMixin from '../../utils/CommonDataMixin'
export default {
  name: 'SaleView',
  mixins: [CommonDataMixin],
  data () {
    return {
      activeIndex: '1',
      radioSelect: '今日',
      date: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      saleViewOptions: {},
      rankArr: []
    }
  },
  computed: {
    rankData () {
      return this.activeIndex === '1' ? this.orderRank : this.userRank
    }
  },
  watch: {
    orderFullYear () {
      this.render(this.orderFullYear, this.orderFullYearAxis, '年度销售额')
    }
  },
  methods: {
    MenuSelectHandler (index) {
      this.activeIndex = index
      if (this.activeIndex === '1') {
        this.render(this.orderFullYear, this.orderFullYearAxis, '年度销售额')
      } else {
        this.render(this.userFullYear, this.userFullYearAxis, '用户访问量')
      }
      // console.log(index)
    },
    render (data, axios, title) {
      this.saleViewOptions = {
        title: {
          text: title,
          textStyle: {
            fontSize: 12,
            color: '#333'
          },
          left: 25,
          top: 20
        },
        xAxis: {
          type: 'category',
          data: axios,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#999'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#eee'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '35%',
            data
          }
        ],
        color: ['#3398DB'],
        grid: {
          top: 70,
          left: 60,
          right: 60,
          bottom: 50
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .sale_view{
    margin-top: 20px;
  }
  .sale_view_card_header{
    position: relative;
    .sale_view_menu{
      width: 100%;
      padding-left: 20px;
      .el-menu-item{
        height: 50px;
        line-height: 50px;
        margin: 0 20px;
      }
    }
    .sale_view_menu_right{
      position: absolute;
      top: 0;
      right: 20px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .el-radio-group{
        margin-right: 20px;
      }
    }
  }
 .rank-wrapper{
   width: 100%;
   height: 270px;
   display: flex;
   .echarts{
     flex: 0 0 70%;
     width: 70%;
   }
   .rankList{
     flex: 1;
     h3{
       font-size: 14px;
       font-weight: 700;
     }
     .list-item{
       display: flex;
       margin-bottom: 12px;
       .item-number{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 20px;
         height: 20px;
         color: #333;
         &.top-no {
           background: #000;
           border-radius: 50%;
           color: #fff;
           font-weight: 500;
         }
       }
       .item-title{
         margin-left: 12px;
       }
       .item-price{
         flex: 1;
         text-align: right;
         margin-right: 20px;
       }
     }
   }
 }
</style>
